<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>咨客_开手牌</title>
		<link href="<c:url value="/resources/css/style.css" />" rel="stylesheet" type="text/css">
		<link href="<c:url value="/resources/css/default/easyui.css" />" rel="stylesheet" type="text/css">
		<link href="<c:url value="/resources/css/icon.css" />" rel="stylesheet" type="text/css">
		<script type="text/javascript" src="<c:url value="/resources/js/util.js" />"></script>
		<script type="text/javascript">
			function onSelToken(){
				$('#selectToken').window('open');
				onResetToken();
				onQueryToken();				
			}
			
			function onResetToken(){
				$("#tokenNo").val("");
				$("#tokenTypeName").combobox("setValue", "-1");
			}
			
			function onQueryToken(){
				$('#tokenTable').datagrid({
					url: 'queryToken.do',
					pageNumber:1,			
					queryParams:{tokenNo:$("#tokenNo").val(),
						tokenType:$("#tokenTypeName").combobox('getValue')}
				});
			}
			
			function onNewOpen(){
				if($.trim($("#token_no").val()) == ''){
					$.messager.alert('操作结果','请填写手牌!');
					return false;
				}
				
				$.ajax({
					url:'openToken',
					data:{'tokenNo':$("#token_no").val(), 
						  'contactStaffNo':$("#contact_staff_no").val()},
					type:'post',
					dataType:'json',
					async:false,
					cache:false,
					success:function(data){
						if(data.result == 'success'){
							//清除原有的表格内容
							$("#billingNo").val('');
							delTable();
							
							//构造输出时间表
							var index = $("#openTable tr").length;
							var rows = "<tr><td style='width:5%; border: 1px solid #7F9DB9;'>" + index + "</td>";
							rows += "<td style='width:5%; border: 1px solid #7F9DB9;'>" + data.obj.billing_no + "</td>";
							rows += "<td style='width:5%; border: 1px solid #7F9DB9;'>" + data.obj.token_no + "</td>";
							rows += "<td style='width:5%; border: 1px solid #7F9DB9;'>" + data.obj.token_type_name + "</td>";
							rows += "<td style='width:5%; border: 1px solid #7F9DB9;'>" + parseTime(data.obj.openTokenTime) + "</td>";
							if(data.obj.contact_staff_no != null && data.obj.contact_staff_no.length > 0 && data.obj.contact_staff_no != "undefined")
								rows += "<td style='width:5%; border: 1px solid #7F9DB9;'>" + data.obj.contact_staff_no + "</td>";
							else
								rows += "<td style='width:5%; border: 1px solid #7F9DB9;'>&nbsp;</td>";
							if(data.obj.product_name != null && data.obj.product_name.length > 0 && data.obj.product_name != "undefined")
								rows += "<td style='width:5%; border: 1px solid #7F9DB9;'>" + data.obj.product_name + "</td>";
							else
								rows += "<td style='width:5%; border: 1px solid #7F9DB9;'>&nbsp;</td>";
							if(data.obj.price != null && data.obj.price.length > 0 && data.obj.price != "undefined")
								rows += "<td style='width:5%; border: 1px solid #7F9DB9;'>￥" + 
									data.obj.price.substr(0, data.obj.price.length - 2) + '.' + data.obj.price.substr(data.obj.price.length - 2, data.obj.price.length) + 
										"</td></tr>";
							else
								rows = rows += "<td style='width:5%; border: 1px solid #7F9DB9;'>&nbsp;</td>";
							$("#openTable").append(rows);
							
							$.messager.alert('操作结果','开手牌成功!');
							$("#token_no").val('');
							$("#contact_staff_no").val('');
							$("#billingNo").val(data.obj.billing_no);
							$("#relateBtn").removeAttr("disabled");
						}
					}
				});
			}
			
			function delTable(){
				var row = $("#openTable tr").length;
				
				for(var i = row - 1; i >= 1; i--){					
					$("#openTable").find("tr").eq(i).remove();
				}
			}
			
			function onRelate(){
				if($.trim($("#token_no").val()) == ''){
					$.messager.alert('操作结果','请填写手牌!');
					return false;
				}
				
				$.ajax({
					url:'relateToken',
					data:{'tokenNo':$("#token_no").val(),
						  'contactStaffNo':$("#contact_staff_no").val(),
						  'billingNo':$("#billingNo").val()},
					type:'post',
					dataType:'json',
					async:false,
					cache:false,
					success:function(data){
						if(data.result == 'success'){
							var index = $("#openTable tr").length;
							var rows = "<tr><td style='width:5%; border: 1px solid #7F9DB9;'>" + index + "</td>";
							rows += "<td style='width:5%; border: 1px solid #7F9DB9;'>" + data.obj.billing_no + "</td>";
							rows += "<td style='width:5%; border: 1px solid #7F9DB9;'>" + data.obj.token_no + "</td>";
							rows += "<td style='width:5%; border: 1px solid #7F9DB9;'>" + data.obj.token_type_name + "</td>";
							rows += "<td style='width:5%; border: 1px solid #7F9DB9;'>" + parseTime(data.obj.openTokenTime) + "</td>";
							if(data.obj.contact_staff_no != null && data.obj.contact_staff_no.length > 0 && data.obj.contract_staff_no != "undefined")
								rows += "<td style='width:5%; border: 1px solid #7F9DB9;'>" + data.obj.contact_staff_no + "</td>";
							else
								rows += "<td style='width:5%; border: 1px solid #7F9DB9;'>&nbsp;</td>";
							if(data.obj.product_name != null && data.obj.product_name.length > 0 && data.obj.product_name != "undefined")
								rows += "<td style='width:5%; border: 1px solid #7F9DB9;'>" + data.obj.product_name + "</td>";
							else
								rows += "<td style='width:5%; border: 1px solid #7F9DB9;'>&nbsp;</td>";
							if(data.obj.price != null && data.obj.price.length > 0 && data.obj.price != "undefined")
								rows += "<td style='width:5%; border: 1px solid #7F9DB9;'>￥" + 
									data.obj.price.substr(0, data.obj.price.length - 2) + '.' + data.obj.price.substr(data.obj.price.length - 2, data.obj.price.length) + 
										"</td></tr>";
							else
								rows += "<td style='width:5%; border: 1px solid #7F9DB9;'>&nbsp;</td>";
											
							$("#openTable").append(rows);
							
							$.messager.alert('操作结果','关联开牌成功!');
							$("#token_no").val('');
							$("#contact_staff_no").val('');
						}
					}
				});
			}
			
			function onReturn(){
				location.href = "${pageContext.request.contextPath}/consultToken/tokenList";
			}
	
		</script>
	</head>
	
	<body>
		<c:import url="/WEB-INF/resources/common/consult_header.jsp" />
		
		<h1>开手牌</h1>
		
		<div style="float:left; width:800px;margin-right: 30px;">
			<div>				
				<div style="max-height:30px;margin-left: 100px;">
					手牌编号：
					<input class="easyui-validatebox" style="width:150px;" type="text"  value="${tokenNo}" name="token_no" id="token_no" data-options="required:true" />
					&nbsp;&nbsp;
	    			<a href="javascript:void(0)" class="easyui-linkbutton" onclick="onSelToken()">选择</a>
				</div>
				<br/>
				<div style="max-height:30px;margin-left: 100px;">
					&nbsp;&nbsp;&nbsp;&nbsp;推销员：
					<input class="easyui-validatebox" style="width:150px;" type="text" name="contact_staff_no" id="contact_staff_no" />
					<input type="hidden" name="billingNo" id="billingNo" />
				</div>
				<br/>
				<div style="max-height:30px;margin-left: 150px;">
					<input type="button" name="relateBtn" id="relateBtn" value="关联开牌F1" disabled onclick="onRelate()">
					<input type="button" name="openBtn" id="openBtn" value="开新牌F2" onclick="onNewOpen()">
					<input type="button" name="returnBtn" id="return" value="返回F3" onclick="onReturn()">
				</div>
				
				<div style="margin-top: 30px;">
					<table id="openTable" style="border-collapse: collapse;width:800px;text-align: center;">
						<tr>
							<td style="width:5%; border: 1px solid #7F9DB9;">&nbsp;</td>
							<td style="width:15%; border: 1px solid #7F9DB9;">开牌单号</td>
							<td style="width:10%; border: 1px solid #7F9DB9;">手牌号码</td>
							<td style="width:10%; border: 1px solid #7F9DB9;">手牌类型</td>
							<td style="width:20%; border: 1px solid #7F9DB9;">开牌时间</td>
							<td style="width:10%; border: 1px solid #7F9DB9;">推销员</td>
							<td style="width:20%; border: 1px solid #7F9DB9;">绑定项目</td>
							<td style="width:10%; border: 1px solid #7F9DB9;">金额</td>
						</tr>
					</table>
				</div>
			</div>
			
			<div id="selectToken" class="easyui-window" title="手牌选择" data-options="modal:true,closed:true,iconCls:'icon-save'" style="width:700px;height:400px;">
			<table id="tokenTable" class="easyui-datagrid" title="手牌列表" style="width:700px;height:250px;"
	 			data-options="rownumbers:true,singleSelect:true, border:false,singleSelect:true,toolbar:'#tb',
	 					fit:true,fitColumns:true,pagination:true,url:'queryToken',onClickRow:function(rowIndex, rowData){
		 						$('#token_no').val(rowData.token_no);
		 						$('#selectToken').window('close');
		 				}">
				<thead>
					<tr>
						<th data-options="field:'token_no',width:80,align:'center'">手牌编号</th>
						<th data-options="field:'tokenTypeName',width:120,align:'center'">手牌类型</th>
						<th data-options="field:'statusName',width:120,align:'center'">手牌状态</th>
					</tr>
				</thead>
			</table>
		
			<div id="tb" style="padding:5px;height:auto">
				<form id="queryTokenForm" name="queryTokenForm" action="queryToken" method="post">
				<div>
					手牌编号: <input class="easyui-validatebox" name="tokenNo" id="tokenNo" style="width:80px">
					&nbsp;&nbsp;&nbsp;&nbsp;
					手牌类型:
					<select id="tokenTypeName" name="tokenTypeName" class="easyui-combobox" data-options="panelHeight:'auto'">
						<option value="-1" selected="selected">所有</option>
						<c:forEach var="code" items="${tokenTypeList}">
							<option value="${code.id}">${code.token_type_name}</option>	
						</c:forEach>
					</select> 
					&nbsp;&nbsp;
					<a href="#" class="easyui-linkbutton" id="searchBtn" style="text-align: center" onclick="onQueryToken()">查询</a>
					<a href="#" class="easyui-linkbutton" id="resetBtn" style="text-align: center" onclick="onResetToken()">清空</a>
				</div>
				</form>
			</div>
		</div>
			
			
		</div>
		
		<div><!-- 占位--></div>
		
		
	</body>
</html>